// Main.js
import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Outlet,
} from "react-router-dom";
import App from "./App";
import App1 from "./App1";
import App2 from "./app2";
import { createRoot } from "react-dom/client";
import Navbar from "rsuite/Navbar";
import Nav from "rsuite/Nav";

// (Optional) Import component styles. If you are using Less, import the `index.less` file.
import "rsuite/Navbar/styles/index.css";
import "rsuite/Nav/styles/index.css";

const MyNavbar = () => {
  return (
    <Navbar>
      <Navbar.Body>
        <Nav>
          <Nav.Item href="/page0">主页面</Nav.Item>
          <Nav.Item href="/page1">浮点数数据</Nav.Item>
          <Nav.Item href="/page2">类别数据</Nav.Item>
          {/* 添加其他导航项 */}
        </Nav>
      </Navbar.Body>
    </Navbar>
  );
};

const Main = () => {
  return (
    <div style={{ backgroundColor: "#f0f0f0" }}>
      <Router id="h">
        <MyNavbar />
        <Routes>
          <Route path="/page1" element={<App />} />
          <Route path="/page2" element={<App1 />} />
          <Route path="/page0" element={<App2 />} />
        </Routes>
      </Router>
    </div>
  );
};

const root = createRoot(document.getElementById("root"));

// 判断是否已经渲染，如果是，则使用 render() 更新，否则进行初次渲染

if (!root.isRendered) {
  root.render(<Main />);
} else {
  root.render();
}

export default Main;
